<template>
  <div>

    <!-- 页面跳转-->
    <div style="margin-bottom: 20px">
    <RouterLink to="/test">跳转test页面</RouterLink> ｜ 
    <a href="/test">跳转test页面</a>

    </div>
    <!--font-size设置大小 font-weight加粗 color颜色 font-style斜体 -->
    <div style="font-size: 40px; font-weight: bolder; color: red; font-style: italic;">
      秋天-云系统主页面 
    </div>

    <div style="font-size: 30px; margin-bottom: 20px;">
      {{ a }} {{ b }}
    </div>
    <!-- {{  }} 绑定数据-->
    <div>
      {{ data.a }}
      {{ data.b }}
    </div>

    <div>
      <!-- 数据可以双向绑定，表单修改绑定的也会修改-->
      <input v-model=" data.a">
    </div>

    <div style="margin-bottom: 20px;">
      <!-- v-if 是当引用的数据相等时才进行展示-->
      <span style="color: red" v-if="data.name === '吕潇'">吕潇</span>
      <span style="color: blue" v-if="data.name === '吕小'">吕小</span>
      <span style="color: hotpink" v-else>吕一一</span>

    </div>

    <div style="margin-bottom: 30px;">
      <!-- @用来处理时间的 -->
      <button @click="click">点我</button>
    </div>

    <div style="margin: 30px;">
      <el-button @click="click" >点我好运加加加</el-button>
      <el-button type="primary">添加用户</el-button>
      <!-- color是背景颜色  style="color: red"是文本颜色-->
      <el-button type="success" color="#626aef" style="color: red">更改用户</el-button>
      <el-button type="info" plain>查看用户信息</el-button>
      <el-button type="warning" plain>提示用户异常</el-button>
      <el-button type="danger" plain>删除用户</el-button>
    </div>

    <div style="margin: 30px">
      <el-icon :size="20">
       <Edit />
      </el-icon> 

      <span style="margin-left: 30px">
        <el-icon :size="20" style="top: 4px"><View /></el-icon> 1000 
      </span>
      <el-button type="danger" :icon="Delete" circle />

      <el-input
       v-model="data.name"
       style="width: 240px"
       placeholder="请输入内容"
       :prefix-icon="Search"
    />
    </div>

  </div>
</template>


<script setup>
import {reactive, ref, onMounted} from 'vue';
//在按钮里使用图标需要进行导入
import { Delete,Search } from '@element-plus/icons-vue';

const a = ref(1)

const b = ref("秋天云系统登陆页面")

// 定义多个数据，无需声明数据类型
const data = reactive({
  a: 1,
  b: "秋天云系统",
  name: '吕'
})

const click = () => {
  alert("点我+1")
}

const clickAddUser = () => {
  alert("添加用户成功")
}

//等待列表加载完成
onMounted(() =>{
  alert("数据加载完成")
})

</script> 